<template>
    <div class="components-container">
        <code>
            <a target="_blank" class="link-type" href="https://panjiachen.github.io/vue-element-admin-site/#/rich-editor">吴太浩</a>
        </code>
        <div>
            <tiny-editor :height="300" v-model="content"></tiny-editor>
        </div>
        <div class="editor-content" v-html="content"></div>
    </div>
</template>

<script>
import TinyEditor from '../../components/tinymce/TinyEditor'

export default {
    name: 'rich-text',
    components: { TinyEditor },
    data() {
        return {
            content: `
                <h1 style="text-align: center;">Welcome to the TinyMCE demo!</h1>
                <p style="text-align: center; font-size: 15px;">
                    <ul>
                        <li>Our <a href="//www.tinymce.com/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
                        <li>Have a specific question? Visit the <a href="https://community.tinymce.com/forum/">Community Forum</a>.</li>
                        <li>We also offer enterprise grade support as part of <a href="https://tinymce.com/pricing">TinyMCE premium subscriptions</a>.</li>
                    </ul>`
        }
    }
}
</script>

<style scoped>
.editor-content{
    margin-top: 20px;
}
</style>